<script setup>
import { ref,reactive } from 'vue';
import { useRouter } from 'vue-router'
// 使用 useRouter 创建一个 router 实例
const router = useRouter()
const dizhi = ref('请选择配送区域')

const state = reactive({
  cityNumber: '110000', // 省地址码
})
const back = () => {
  router.go(-1);
}
const areaList = {
  province_list: {
    110000: '北京市',
    120000: '天津市',
    370000: '山东省',
  },
  city_list: {
    110100: '北京市',
    120100: '天津市',
    370400: "枣庄",
  },
  county_list: {
    110101: '东城区',
    110102: '西城区',
    120101: '和平区',
    120102: '河东区',
    370402: '市中区',
    370403: '薛城区',
  },
};
const show = ref(false);
const showPopup = () => {
  show.value = true;
}
const cityConfirm = (e) => {
  console.log(e.selectedOptions[0].text+`/`+e.selectedOptions[1].text+`/`+e.selectedOptions[2].text);
  const di = e.selectedOptions[0].text+`/`+e.selectedOptions[1].text+`/`+e.selectedOptions[2].text
  dizhi.value = di
  show.value = false
}
const quxiao = () => {
  show.value = false
}
const value = ref(5);
</script>

<template>
  <div id="box">
    <!-- 导航 -->
    <div class="navBox">
      <div class="navBox_title">
        <div style="width: 42%;"><van-icon name="arrow-left" @click="back" /></div>
        <div>商品详情</div>
      </div>
    </div>
    <!-- 商品图片 -->
    <div class="sl_box_img">
      <img src="/public/images/recomment-banner.png" alt="">
    </div>
    <!-- 价格 -->
    <div class="sl_box_price">
      <div class="sl_box_price1">
        <div style="color: #f84c55;">
          ￥<text style="font-weight: bold;font-size: 24px;">390</text>
          <text style="color: #999999;font-size: 20px;text-decoration: line-through;margin: 0 10px;">￥390</text>
          <text
            style="font-size: 14px;background-color: #ff5050;color: #fff;padding: 5px;border-radius: 5px;">促销价</text>
        </div>
        <div style="color: #999999;">已售683件</div>
      </div>
      <div class="sl_box_price2">心中洛神</div>
      <div class="sl_box_price3">
        洛神玫瑰33枝 <text style="color: #ffab64;">花如其名 心中永远的神</text>
      </div>
    </div>
    <!-- 明细 -->
    <div class="sl_box_details">
      <div class="detailsBox">
        <div class="detailsBox——box">
          <div class="detailsBox——box1">已选</div>
          <div class="detailsBox——box2" style="border-bottom: 1px solid #e1e1e1;">
            <div>心中洛神</div>
            <div><van-icon name="arrow" /></div>
          </div>
        </div>
        <div class="detailsBox——box">
          <div class="detailsBox——box1">送至</div>
          <div class="detailsBox——box2">
            <div>
              <van-icon name="location-o" style="margin-right: 5px;" />
              {{ dizhi }}
            </div>
            <div>
              <van-icon name="arrow" @click="showPopup" />
              <van-popup v-model:show="show" position="bottom">
                <van-area v-model="state.cityNumber" title="请选择配送区域" :area-list="areaList" @confirm="cityConfirm" @cancel="quxiao"/>
              </van-popup>
            </div>
          </div>
        </div>
      </div>
      <div class="detailsBox">
        <div class="detailsBox——box">
          <div class="detailsBox——box1">花语</div>
          <div class="detailsBox——box2" style="border-bottom: 1px solid #e1e1e1;">
            <div>一眼足以定终身，我心佳人比洛神</div>
            <div><van-icon name="arrow" /></div>
          </div>
        </div>
        <div class="detailsBox——box">
          <div class="detailsBox——box1">材料</div>
          <div class="detailsBox——box2" style="border-bottom: 1px solid #e1e1e1;">
            <div>洛神玫瑰33枝</div>
            <div><van-icon name="arrow" /></div>
          </div>
        </div>
        <div class="detailsBox——box">
          <div class="detailsBox——box1">配送</div>
          <div class="detailsBox——box2">
            <div>“精品鲜花”免费配送</div>
            <div><van-icon name="arrow" /></div>
          </div>
        </div>
      </div>
      <div class="detailsBox">
        <div class="detailsBox——box2">
          <div class="detailsBox_box1">晒单与评价</div>
          <div class="detailsBox_box2">
            <div style="text-align: right;width: 90%;">有56条评价</div>
            <div><van-icon name="arrow" /></div>
          </div>
        </div>
        <div class="detailsBox——box3" v-for="item in 2">
          <div class="detailsBox——box3_font1">
            <div class="topfont">
              <div class="topfont1">
                <img src="/public/images/recomment-tx1.png" alt="">
              </div>
              <div class="topfont2">王*丽</div>
            </div>
            <div style="box-sizing: border-box;padding-top: 3%;">
              <van-rate v-model="value" />
            </div>
          </div>
          <div class="detailsBox——box3_font2">
            真的很棒，从鲜花到配送没得挑，以后还会买的!
          </div>
          <div class="detailsBox——box3_font3">
            <img src="/public/images/recomment-evaluate.png" alt="">
            <img src="/public/images/recomment-evaluate.png" alt="">
            <img src="/public/images/recomment-evaluate.png" alt="">
          </div>
          <div class="detailsBox——box3_font4">
            <van-icon name="location-o" style="margin-right: 5px;" />广东佛山市顺德区
          </div>
        </div>
        <div style="text-align: center;margin-bottom: 10px;">查看全部评价</div>
      </div>

      <div style="text-align: center;color: #999999;margin-bottom: 15px;">
        —————&nbsp;&nbsp;&nbsp;商品详情&nbsp;&nbsp;&nbsp;—————</div>
    </div>
    <!-- 详情 -->
    <div class="sl_bottom">
      <div style="padding: 20px;box-sizing: border-box;">
        <div style="display: flex;line-height: 20px;margin-bottom: 10px;">
          <div style="margin-right: 10px;color: #999999;width: 10%;">编号</div>
          <div style="width: 80%;">901527</div>
        </div>
        <div style="display: flex;line-height: 20px;margin-bottom: 10px;">
          <div style="margin-right: 10px;color: #999999;width: 10%;">类别</div>
          <div style="width: 80%;">鲜花</div>
        </div>
        <div style="display: flex;line-height: 20px;margin-bottom: 10px;">
          <div style="margin-right: 10px;color: #999999;width: 10%;">包装</div>
          <div style="width: 80%;">
            白色小号英文插画纸6张、白色雪梨纸2张、粉色罗
            纹烫金丝带2米
          </div>
        </div>
        <div style="display: flex;line-height: 20px;">
          <div style="margin-right: 10px;color: #999999;width: 10%;">附送</div>
          <div style="width: 80%;">下单填写留言，即免费赠送精美贺卡!</div>
        </div>
      </div>
      <div>
        <img src="/public/images/recomment-img.png" alt="" style="width: 100%;">
      </div>
      <div style="text-align: center;margin: 10px 0;">心中洛神</div>
      <div style="text-align: center;margin: 10px 0 30px;">一眼足以定终身，我心佳人比洛神</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
#box {

  // 导航
  .navBox {
    height: 50px;

    .navBox_title {
      color: #000;
      display: flex;
      padding: 10px;
      box-sizing: border-box;
    }
  }

  // 商品图片
  .sl_box_img {
    img {
      width: 100%;
    }
  }

  // 价格
  .sl_box_price {
    padding: 10px;
    box-sizing: border-box;

    .sl_box_price1 {
      display: flex;
      justify-content: space-between;
    }

    .sl_box_price2 {
      font-size: 18px;
      margin: 10px 0;
    }

    .sl_box_price3 {
      font-size: 14px;
    }
  }

  // 明细
  .sl_box_details {
    padding: 10px;
    box-sizing: border-box;
    background-color: #f6f6f6;

    .detailsBox {
      background-color: #fff;
      padding: 10px;
      border-radius: 10px;
      margin-bottom: 10px;
      box-sizing: border-box;

      .detailsBox——box {
        display: flex;
        justify-content: space-between;

        .detailsBox——box1 {
          width: 15%;
          padding: 10px 0;
          box-sizing: border-box;
          color: #656565;
        }

        .detailsBox——box2 {
          width: 85%;
          color: #656565;

          display: flex;
          justify-content: space-between;
          padding: 10px 0;
          box-sizing: border-box;
        }
      }

      .detailsBox——box2 {
        display: flex;
        justify-content: space-between;

        .detailsBox_box1 {
          width: 30%;
          padding: 10px 0;
          box-sizing: border-box;
        }

        .detailsBox_box2 {
          width: 70%;
          color: #acacac;
          display: flex;
          justify-content: space-between;
          padding: 10px 0;
          box-sizing: border-box;
        }
      }

      .detailsBox——box3 {
        margin-bottom: 20px;

        .detailsBox——box3_font1 {
          display: flex;
          justify-content: space-between;
          margin-bottom: 10px;

          .topfont {
            display: flex;

            .topfont1 {
              margin-right: 10px;

              img {
                width: 40px;
              }
            }

            .topfont2 {
              color: #acacac;
              line-height: 48px;
            }
          }
        }

        .detailsBox——box3_font3 {
          margin: 10px 0;

          img {
            width: 90px;
            margin-right: 10px;
          }
        }

        .detailsBox——box3_font4 {
          color: #a2a2a2;
        }
      }
    }
  }

  // 详情
  .sl_bottom {
    border-radius: 10px 10px 0 0;
    background-color: #fff;
    margin-top: -10px;
    box-sizing: border-box;
  }
}
</style>